<template>
  <div>
    <div class="warp-box-line">
      <div class="warp-box-line-left" ref="lineLeftRef">
        <!-- &nbsp;{{ lineLeftData }}% -->
      </div>
      <div class="warp-box-line-right" ref="lineRightRef">
        <!-- <div>{{ lineRightData }}%</div> -->
      </div>
    </div>
    <div class="warp-box-line-num">
      <div class="warp-box-line-num-left">&nbsp;{{ lineLeftData }}%</div>
      <div class="warp-box-line-num-right">{{ lineRightData }}% &nbsp;</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'lineBox',
  props: {
    lineLeft: {
      type: Number,
      default: 50,
    },
    lineRight: {
      type: Number,
      default: 50,
    },
    totality: {
      type: Number,
      default: 100,
    },
    deepColor: {
      type: String,
      default: '',
    },
    shallowColor: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      lineLeftData: null,
      lineRightData: null,
    }
  },
  watch: {
    totality(newVal, oldVal) {
      if (newVal) {
        this.getRefData()
      }
    },
    lineLeft(newVal, oldVal) {
      if (newVal) {
        this.getRefData()
      }
    },
    lineRight(newVal, oldVal) {
      if (newVal) {
        this.getRefData()
      }
    },
  },
  created() {},
  mounted() {
    this.getRefData()
  },
  methods: {
    getRefData() {
      this.lineLeftData = parseFloat(
        (this.lineLeft / this.totality) * 100
      ).toFixed(2)
      this.lineRightData = parseFloat(
        (this.lineRight / this.totality) * 100
      ).toFixed(2)
      this.$refs.lineLeftRef.style.width = `${this.lineLeftData}%`
      this.$refs.lineRightRef.style.width = `${this.lineRightData}%`
      this.$refs.lineLeftRef.style.backgroundColor = this.deepColor
      this.$refs.lineRightRef.style.backgroundColor = this.shallowColor
    },
  },
}
</script>
<style lang="scss" scoped>
.warp-box-line {
  width: 100%;
  height: 15px;
  display: flex;
  align-items: center;
  .warp-box-line-left {
    width: 50%;
    height: 15px;
    background-color: #2a52c7;
    // background-color: v-bind(deepColor);
    color: #fff;
    text-align: left;
    font-size: 12px;
  }
  .warp-box-line-right {
    width: 50%;
    height: 15px;
    background-color: #92aeff;
    // background-color: v-bind(shallowColor);
    color: #fff;
    text-align: right;
    font-size: 12px;
  }
}
.warp-box-line-num {
  display: flex;
  justify-content: space-between;
  .warp-box-line-num-left {
    position: relative;
    top: -16px;
    color: #fff;
    font-size: 12px;
  }
  .warp-box-line-num-right {
    position: relative;
    top: -16px;
    color: #fff;
    font-size: 12px;
  }
}
</style>
